<template>
  <div id="App">
    <div class="login_container">
      <!--<img src="../assets/logo1.png" alt="">-->
      <div class="login_box">
        <!-- <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div> -->
        <span class="title">综测管理系统</span>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
          <!--用户名-->
          <el-form-item label="" prop="username">
            <el-input v-model="loginForm.username" placeholder="学号" prefix-icon=""></el-input>
          </el-form-item>
          <!--密码-->
          <el-form-item label="" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="登录密码" prefix-icon="" show-password>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="verificationCode">
            <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码" clearable style="width: 200px;" />
            <div @click="refreshCode" style="">
              <!--验证码组件-->
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
          </el-form-item>
          <el-button type="text" @click="findPw"
            style="display: flex;font-size: 12px;padding: 0;justify-content: flex-start;">忘记密码？</el-button>
          <el-form-item class="btn2">
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from '../components/yzcode.vue'
export default {
  name: 'Login',
  comments: {
    SIdentify
  },
  data() {
    return {
      // 登录表单的数据绑定对象
      loginForm: {
        username: '',
        password: ''
      },
      // 登录表单的验证规则对象
      loginFormRules: {
        username: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 5, max: 9, message: '长度非法！', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      // identifyCode: '',
      identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
    }
  },
  methods: {
    // resetLoginForm() {
    //   this.$refs.loginFormRef.resetFields();
    // },
    // 刷新验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i & l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    login() {
      //用接口验证实现登录功能
      // this.$refs.loginFormRef.validate(async (valid) => {
      //   if (!valid) return;
      //   const { data: res } = await this.$http.post("Login", this.loginForm);
      //   //console.log(res);
      //   if (res.meta.status != 200) return this.$message.error("登录失败！");
      //   this.$message.success("登录成功！");
      //   window.sessionStorage.setItem("token", res.data.token);
      //   this.$router.push('/Home');
      // });
      // this.$parent.showNav=true;
      // 验证学号密码是否正确
      // if (this.loginForm.username == '' || this.loginForm.password == '') {
      //   this.$msgbox.alert('信息不能为空');
      //   // location.reload();
      //   // this.$router.go(0);
      // }
      // else {
      // }
      this.$router.push('/Home');
    },
    findPw() {
      this.$router.push('/ForgetPw')
    }
  },
  mounted() {
    // 初始化验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
}
</script>

<style scoped>
.login_container {
  height: 100%;
  background-color: #eee;
}

.login_box {
  width: 500px;
  height: 350px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

.title {
  color: #409EFF;
  display: flex;
  margin-top: 30px;
  margin-left: 20px;
  font-size: 24px;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

}

.btn1 {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  /* font-size: 14px; */
}

.btn2 {
  display: flex;
  justify-content: center;
}
</style>
